<template>
  <view class="user-container">
    <view class="user-info">
      <view class="user-info-top" v-if="token">
        <!-- 未登录 -->
        <view class="img"></view>
        <!-- 登录显示的头像 -->
        <view class="img" v-if="false"></view>
        <view class="user-info-top-detail">
          <view class="user-info-top-detail-name">
            <text class="student-name">张仁杰</text>
            <text class="post">教师</text>
          </view>
          <view class="user-info-top-detail-school">
            <text>洛江实验中学</text>
          </view>
        </view>
      </view>

      <view class="bottom" v-if="token" @click="onclick">
        <u-cell-group>
          <u-cell icon="star-fill" title="我的收藏" isLink></u-cell>
        </u-cell-group>
      </view>

    </view>

    <view class="logout" v-if="token" @tap="logout">
      <text>退出登录</text>
    </view>
	<view class="logout" v-else @tap="logout">
      <text>请登录</text>
    </view>
	
	<u-button @click="toPdfPage">预览pdf文件</u-button>
	
  </view>
</template>

<script>
  export default {
    name: 'UserInfo',
	props: {
		token: {
			type: String,
			default: '',
			
		}
	},
    data() {
      return {
      }
    },
    methods: {
	  toPdfPage() {
		  uni.navigateTo({
		  	url: '/pages/webview/index?id='+123456
		  })
	  },
      logout() {
        this.$emit( 'logout' )
      },
      onclick() {
        this.$emit( 'click' )
      }
    }
  }
</script>

<style lang="scss">
  .user-container {
    .user-info {

      &-top {
        display: flex;
        align-items: center;
        width: 100%;
        height: 350rpx;
        // background: linear-gradient(to right, #1c4bb2, #6572f8);
        background-color: #2752bd;
        padding-left: 40rpx;

        .img {
          width: 200rpx;
          height: 200rpx;
          border-radius: 50%;
          background-color: #ffffff;
          margin-right: 40rpx;
        }

        &-detail {

          &-name {
            margin-bottom: 20rpx;

            .student-name {
              font-size: 44rpx;
              color: #FFF;
              font-weight: 700;
            }

            .post {
              color: #FFF;
              padding-left: 20rpx;
            }
          }

          &-school {
            color: #FFF;
          }
        }
      }
    }

    .bottom {
      background-color: #FFF;
    }

    .logout {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background-color: #fff;
      color: #df253c;
      box-shadow: 3px 3px 3px rgba(215, 215, 215, 0.996078431372549);
      margin-top: 15%;
      margin-left: auto;
      margin-right: auto;
    }
  }
</style>